<template>
	<view class="container">
		<view class="top-container">
			<!-- 轮播背景 -->
			<swiper class="swiper" circular indicator-dots indicator-color="#ffffff">
				<swiper-item v-for="(item, index) in seele.page_shop_home.banner" :key="index">
					<image :src="$wanlshop.oss(item)" mode="aspectFill" class="swiper-image" />
				</swiper-item>
			</swiper>

			<!-- 浮层内容 -->
			<view class="overlay">
				<!-- 第一行 -->
				<view class="first-row">
					<view class="location">
						<text>{{seele.page_shop_home.city}}</text>
						<uni-icons type="down" color="#ffffff" size="12"></uni-icons>
					</view>
					<view class="search-box">
						<uni-icons type="search" class="search-icon"></uni-icons>
						<input placeholder="请输入搜索内容" class="search-input" />
						<text>|</text>
						<button class="search-btn" :hover-class="null">搜索</button>
					</view>
				</view>

				<!-- 第二行 -->
				<view class="second-row">
					<view @click="turn_to(item)" v-for="(item, index) in iconList" :key="index" class="icon-item">
						<image :src="item.icon" class="function-icon" />
						<text class="icon-text">{{ item.text }}</text>
					</view>
				</view>
			</view>

			<view class="bottom-actions">
				<view @click="turn_to(item)" v-for="(item, index) in bottomIcons" :key="index" class="action-item">
					<image :src="item.icon" :class="[index!=2?'action-icon':'action-icon-lg']" mode="aspectFill" />
					<text class="action-text" v-if="index !=2">{{ item.text }}</text>
				</view>
			</view>
		</view>

		<view class="other-actions">
			<view @click="turn_to(item)" v-for="(item, index) in otherIcons" :key="index" class="other-item">
				<image :src="item.icon" class="other-icon" mode="aspectFill" />
				<text class="action-text">{{ item.text }}</text>
			</view>
		</view>

		<view class="ad-container" @click="$wanlshop.to('/pages/apps/find/details/video')">
			<image :src="$wanlshop.oss(seele.page_conf.adv_img_2)"></image>
		</view>

		<view class="section-f">
			<image class="ad-img" :src="$wanlshop.oss(seele.page_conf.adv_img_3)" mode="aspectFill"></image>
		</view>

		<!-- 底部关注栏 -->
		<view v-if="showBanner" class="bottom-banner">
			<view class="banner-content">
				<!-- 左侧内容 -->
				<view class="left-section">
					<image src="/static/images/notice-icon.png" class="banner-icon" />
					<view class="text-container">
						<text class="title">关注都市天菲</text>
						<text class="subtitle">欢迎入驻都市天菲小程序，实现线上线下团购</text>
					</view>
				</view>

				<!-- 右侧操作区 -->
				<view class="right-section">
					<button class="follow-btn">立即关注</button>
					<view class="close-btn" @tap="closeBanner">×</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		props: ['shop_id' ],
		computed: {...mapState(['seele'])},
		data() {
			return {
				showBanner: true,
				swiperList: [
					'/static/mbanner2.png',
					'/static/mbanner2.png',
					'/static/mbanner2.png'
				],
				iconList: [{
						icon: '/static/images/scan.png',
						text: '扫一扫',
						// func:'scan',
						path:'#'
					},
					{
						icon: '/static/images/trade.png',
						text: '交易中心',
						path:'#'
						// path:'/pages/user/order/order'
					},
					{
						icon: '/static/images/video.png',
						text: '我的视频',
						path:'#'
						// path:"/pages/apps/find/details/video"
					},
					{
						icon: '/static/images/follow.png',
						text: '已关注',
						// path:'/pages/user/follow'
						path:'#'
					}
				],
				// 新增数据项
				bottomIcons: [{
						icon: '/static/images/nearby.png',
						text: '附近畅链',
						// path:"/pages/dispatch/shop/wifiPage?shop_id="
						path: "#"
					},
					{
						icon: '/static/images/checkin.png',
						text: '入住平台',
						path:"/pages/new/settled/settled"
					},
					{
						icon: '/static/images/get.png',
						text: '入驻',
						// path:'/pages/shop/index?shop_id='
						path: "#"
					},
					{
						icon: '/static/images/mall.png',
						text: '天菲商城',
						// path:"/pages/index"
						path: "#"
					},
					{
						icon: '/static/images/ticket.png',
						text: '门票中心',
						// path:"/pages/dispatch/shop/voucherPage"
						path: "#"
					}
				],

				otherIcons: [{
						icon: '/static/images/n1.png',
						text: '附近商家',
						path:"/pages/dispatch/shop/near?filter=all"
					},
					{
						icon: '/static/images/c1.png',
						text: '旅游团购',
						// path:"/pages/dispatch/shop/near?filter=TRAVEL,GROUP"
						path: "#"
					},
					{
						icon: '/static/images/o1.png',
						text: '火速派单',
						// path:'/pages/dispatch/releaseIndex/releaseIndex'
						path: "#"
					},
					{
						icon: '/static/images/m1.png',
						text: '商家有券',
						// path:'/pages/user/coupon/list'
						path: "#"
					},
					{
						icon: '/static/images/t1.png',
						text: '淘票票',
						// func:'turn_to_taopiapiap'
						path: "#"
					}
				],
				// 指示点样式配置
				indicatorStyle: "bottom: 120rpx;"
			}
		},
		methods: {
			closeBanner() {
				this.showBanner = false
			},
			turn_to(item){
				this.$store.dispatch('seele/home_top_opt',{
					item:item,shop_id:this.shop_id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {}

	.top-container {
		position: relative;
		height: 695rpx;
		// background: url("@/static/mbanner1.png") center center no-repeat;
		background-size: 100% 100%;
	}

	.swiper {
		height: 696rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.overlay {
		position: absolute;
		top: 35rpx;
		left: 0;
		width: 100%;
		padding: calc(10rpx + var(--status-bar-height)) 20rpx 20rpx 20rpx;
		
		box-sizing: border-box;
	}



	.first-row {
		display: flex;
		justify-content: start;
		align-items: center;
		margin-bottom: 40rpx;
		margin-right: 40rpx;
	}

	.location {
		display: flex;
		align-items: center;
		color: #ffffff;
		font-size: 24rpx;
		width:110rpx;
		text{
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}


	.search-box {
		flex: 1;
		max-width: 400rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 10rpx 20rpx;
		display: flex;
		align-items: center;
		margin-left: 20rpx;

		text {
			font-size: 28rpx;
			color: #333;
		}
	}

	.search-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	.search-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.search-btn {
		background: transparent;
		font-size: 28rpx;
		padding: 0;
		margin-left: 20rpx;
		line-height: 1;
	}

	.second-row {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.icon-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.function-icon {
		width: 60rpx;
		height: 60rpx;
		margin-bottom: 10rpx;
	}

	.icon-text {
		color: #ffffff;
		font-size: 12px;
		text-align: center;
	}

	.bottom-actions {
		position: absolute;
		width: 100vw;
		height: 136rpx;
		background: rgba(255, 255, 255, 0.8);
		padding: 20rpx 0;
		display: flex;
		justify-content: space-around;
		backdrop-filter: blur(10px);
		bottom: 8rpx;
	}

	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.action-icon {
		width: 81rpx;
		height: 45rpx;
		margin-bottom: 8rpx;
	}

	.action-icon-lg {
		width: 113rpx;
		height: 113rpx;
	}

	.action-text {
		font-size: 20rpx;
		white-space: nowrap;
	}

	.other-actions {
		width: 100vw;
		height: 115rpx;
		background: rgba(255, 255, 255, 0.8);
		padding: 20rpx 0;
		display: flex;
		justify-content: space-around;
		backdrop-filter: blur(10px);
		bottom: 8rpx;
	}

	.other-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.other-icon {
		width: 63rpx;
		height: 57rpx;
		margin-bottom: 8rpx;
	}

	.ad-container {
		width: 100vw;
		height: 100rpx;

		image {
			width: 100vw;
			height: 123rpx;
		}
	}

	.section-f {
		margin: 40rpx 29rpx 29rpx 29rpx;
		border-radius: 30rpx;

		.ad-img {
			border-radius: 30rpx;
			width: 696rpx;
			height: 520rpx;
		}
	}
	
	.bottom-banner {
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  right: 0;
	  background: rgba(92, 92, 92, 0.95);
	  padding: 20rpx 30rpx;
	  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.1);
	  z-index: 999;
	}
	
	.banner-content {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.left-section {
	  flex: 1;
	  display: flex;
	  align-items: center;
	  margin-right: 30rpx;
	}
	
	.banner-icon {
	  width: 60rpx;
	  height: 60rpx;
	  margin-right: 20rpx;
	}
	
	.text-container {
	  display: flex;
	  flex-direction: column;
	}
	
	.title {
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #ffffff;
	  margin-bottom: 8rpx;
	}
	
	.subtitle {
	  font-size: 22rpx;
	  color: #ffffff;
	}
	
	.right-section {
	  display: flex;
	  align-items: center;
	}
	
	.follow-btn {
	  background: #E64340;
	  color: white;
	  font-size: 24rpx;
	  padding: 8rpx 25rpx;
	  border-radius: 30rpx;
	  margin-right: 30rpx;
	  line-height: 1.5;
	}
	
	.close-btn {
	  font-size: 40rpx;
	  color: #999;
	  width: 40rpx;
	  height: 40rpx;
	  line-height: 36rpx;
	  text-align: center;
	}
</style>